import dayjs from '@/components/dayjs';
import { Ellipsis } from '@/components/Ellipsis';
import {
  addInfo,
  changeProjectTeam,
  delInfo,
  getContractAndInfoCodeNext,
  getCustomerByPage,
  getFileByPayInfo,
  getInfoByPage,
  getPayInfoByInfoId,
  getProjectTeamInfos,
  getTeamInfos,
  releaseProject,
  shutProject,
  synProjectInfo,
  updateInfo,
} from '@/services/project/info';
import { tableSearchPublicConfig } from '@/utils/filterUtils';
import { filterTranNew, sortTran } from '@/utils/requestUtil';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {
  Button,
  Col,
  DatePicker,
  Form,
  Input,
  message,
  Modal,
  notification,
  Row,
  Select,
  Table,
  Tabs,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { createRef, useEffect, useRef, useState } from 'react';
import { history, useModel } from 'umi';
import ErrorReport from '../platform/errorReport';
import MaterialCostComparison from '../product/materialCostComparison';
import WorkHoursComparison from '../product/workHoursComparison';
import BatchPlan from './batchPlan';
import FileInfo from './fileInfo';
import ProduceInfo from './produceInfo';
import './style.less';
import type { DataType, FeeType, tabType } from './type';
const Info: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>(null);
  const [projectCode, setProjectCode] = useState('');
  const [projectName, setProjectName] = useState('');
  const [projectInfo, setProjectInfo] = useState(null);
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [form] = Form.useForm();
  const [feeForm] = Form.useForm();
  const [customeCode, setCustomerCode] = useState<customerCodeType[]>();
  const [nowCustomer, setNowCustomer] = useState<nowCustom>();
  const dateFormat = 'YYYY-MM-DD';
  const [teamInfo, setTeamInfo] = useState();
  const [teamId, setTeamId] = useState();
  const [infoId, setInfoId] = useState();
  const [teamOptions, setTeamOptions] = useState();
  const [changeTeamFlag, setChangeTeamFlag] = useState(false);
  const teamCodeRef = useRef(null);
  const [allTeamMenber, setAllTeamMenber] = useState();
  const [contractAmount, setContractAmount] = useState('');
  const produceInfoRef = useRef(null);
  const materPlanRef = useRef(null);
  const batchPlanRef = useRef(null);
  const fileInfoRef = useRef(null);
  const [advanceFile, setAdvanceFile] = useState();
  const [firstFile, setFirstFile] = useState();
  const [secondFile, setSecondName] = useState();
  const [finalFile, setFinalFile] = useState();
  const [fileList, setFileList] = useState([]);
  const uploadRef1 = createRef();
  const [hiddenArr, setHiddenArr] = useState({
    advance: 0,
    stageFirst: 0,
    stageSecond: 0,
    final: 0,
  });
  const [allFilesData, setAllFilesData] = useState<any[]>([]);
  const [ticketOptions, setTicketOptions] = useState([
    { label: '是', value: '是' },
    { label: '否', value: '否' },
  ]);
  const [allFiles, setAllFiles] = useState<any[]>([]);
  const [feeInfo, setFeeInfo] = useState<FeeType>();
  const { initialState } = useModel('@@initialState'); //hooks获取全局的共享的当前用户信息
  const [userRole, setUserRole] = useState<string[]>(); //当前用户的身份

  //复合框
  const [editModalVisit, setEditModalVisit] = useState(false);
  const onChange = (key: string) => {};
  useEffect(() => {
    history.listen((location) => {
      setEditModalVisit(false);
    });
    try {
      if (!initialState?.currentUser) {
        history.replace('/user/login');
        notification.error({
          message: '获取用户信息失败',
          description: '获取用户信息失败，将跳回到登录页面',
        });
        throw new Error('获取用户信息失败');
      }
      console.log('initialState', initialState);
      setUserRole(initialState.roleInfo);
    } catch (err) {
      console.log(err);
    }
  }, [history]);

  //项目编辑提交
  const editSubmit = async () => {
    form
      .validateFields()
      .then(async () => {
        const res = { ...form.getFieldsValue() };
        res.contractDate = dayjs(res.contractDate).format(dateFormat);
        if (res.deliveryDate !== null) {
          res.deliveryDate = dayjs(res.deliveryDate).format(dateFormat);
        }
        const result = await updateInfo(res);
        if (result != null) {
          message.success('编辑成功');
        }
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current!.reload();
      })
      .catch(() => {
        setConfirmLoading(false);
      });
  };

  //团队信息
  const teamInfoColumns: ColumnsType<DataType> = [
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName',
      width: 100,
      align: 'center',
      sorter: true,
    },
    {
      title: '角色',
      dataIndex: 'category',
      key: 'category',
      width: 100,
      align: 'center',
      sorter: true,
    },
    {
      title: '电子邮箱',
      dataIndex: 'email',
      key: 'email',
      width: 100,
      align: 'center',
      sorter: true,
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
      width: 100,
      align: 'center',
      sorter: true,
    },
  ];
  //更换团队
  const changeTeam = () => {
    setChangeTeamFlag(true);
  };
  //确定更换团队
  const sureChangeTeam = async () => {
    const result = await changeProjectTeam(infoId, teamInfo.teamId);
    if (result && result.code === 0) {
      message.success(result.message);
    }
    setChangeTeamFlag(false);
  };

  const handleContractAmountChange = (value: any) => {
    if (value && !isNaN(value)) {
      const formattedValue = parseFloat(value).toFixed(2);
      form.setFieldsValue({ contractAmount: formattedValue });
    } else {
      setContractAmount(value);
      form.setFieldsValue({ contractAmount: value });
    }
  };

  //阶段款固定小数
  const handleStageChange = (label: string, value: any, portion: string) => {
    if (value && !isNaN(value)) {
      const finalPay = feeForm.getFieldsValue().finalPay || 0;
      const stagePayFirst = feeForm.getFieldsValue().stagePayFirst || 0;
      const stagePaySecond = feeForm.getFieldsValue().stagePaySecond || 0;
      const advancePay = feeForm.getFieldsValue().advancePay || 0;
      const total =
        Number(advancePay) + Number(stagePayFirst) + Number(stagePaySecond) + Number(finalPay);
      if (Number(value) > Number(contractAmount) || Number(total) > Number(contractAmount)) {
        feeForm.setFieldsValue({ [label]: (0.0).toFixed(2) });
        feeForm.setFieldsValue({ [portion]: (0.0).toFixed(2) });
        return;
      }
      const formattedValue = parseFloat(value).toFixed(2);
      feeForm.setFieldsValue({ [label]: formattedValue });
      //计算比例
      feeForm.setFieldsValue({
        [portion]: ((Number(formattedValue) / Number(contractAmount)) * 100).toFixed(2),
      });
    } else {
      // setContractAmount(value);
      feeForm.setFieldsValue({ [label]: value });
    }
  };

  const onFilesChange = async (file: any, stageName?: string) => {};

  const beforeUpload = (file, stageName: string) => {
    setHiddenArr({ ...hiddenArr, [stageName]: 1 });
    let formData;
    if (file.size / 1024 / 1024 < 100) {
      formData = new window.FormData();
      formData.append('file', file);
    } else {
      message.info('文件大小不能超过100MB!');
    }
    setAllFiles([...allFiles, { stageName: stageName, file: formData, infoId: infoId }]);

    return false;
  };

  const items: tabType[] = [
    {
      key: '1',
      name: 'tab1',
      label: `项目信息`,
      content: (
        <div>
          <Form
            name="wrap"
            labelCol={{ flex: '120px' }}
            labelAlign="right"
            labelWrap
            form={form}
            wrapperCol={{ flex: 1 }}
            colon={false}
            validateTrigger={['onBlur', 'onChange']}
          >
            {/* <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input />
                </Form.Item>
                <Form.Item
                  label="合同名称："
                  name="contractName"
                  rules={[{ required: true, message: '请输入合同名称！' }]}
                >
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="合同编号："
                  name="contractCode"
                  rules={[{ required: true, message: '请输入合同编号！' }]}
                >
                  <Input disabled={true} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="合同日期："
                  name="contractDate"
                  rules={[{ required: true, message: '请输入合同日期！' }]}
                >
                  <DatePicker disabled={createOrUpdate} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="合同金额："
                  name="contractAmount"
                  rules={[
                    { required: true, message: '请输入合同金额！' },
                    {
                      pattern:
                        /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?[\u4e00-\u9fa5]?$)|(^(0){1}[\u4e00-\u9fa5]?$)|(^[0-9]\.[0-9]([0-9])?[\u4e00-\u9fa5]?$)/,
                      message: '格式错误，只保留两位小数!',
                      validateTrigger: ['onBlur', 'onChange'],
                    },
                  ]}
                >
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
            </Row> */}
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="项目名称："
                  name="projectName"
                  rules={[{ required: true, message: '请输入项目名称！' }]}
                >
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="项目编号："
                  name="projectCode"
                  rules={[{ required: true, message: '请输入项目名称！' }]}
                >
                  <Input disabled={true} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="客户名称：" name="customerName">
                  <Select
                    placeholder="请选择客户名称"
                    // disabled={createOrUpdate}
                    onChange={(label, value) => {
                      setNowCustomer({ customerName: value.label, customerCode: label });
                      form.setFieldsValue({
                        customerCode: label,
                      });
                    }}
                    options={customeCode}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="客户编号：" name="customerCode">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="客户地址：" name="customerAddress">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="联系人：" name="contactName">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="联系电话：" name="contactNo">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="交货地点：" name="deliveryAddress">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="项目交付日期："
                  name="deliveryDate" //js jsx+typescript ts Date string 类型校验
                  rules={[{ required: true, message: '请输入项目交付日期!' }]}
                >
                  {/* <DatePicker disabled={createOrUpdate} /> */}
                  <DatePicker />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="销售订单号：" name="so">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={24}>
                <Form.Item label="备&nbsp;&nbsp;&nbsp;&nbsp;注：" name="memo">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <div className="info-btn">
            <Button
              type="primary"
              onClick={async () => {
                setConfirmLoading(true);
                const res = form.getFieldsValue();
                if (res.deliveryDate !== null) {
                  res.deliveryDate = dayjs(res.deliveryDate).format(dateFormat);
                }
                console.log(res, '项目信息');
                const result = await updateInfo(res);
                if (result.code === 0) {
                  message.success(result.message);
                } else {
                  message.error('更新失败');
                }
                setConfirmLoading(false);
                // setEditModalVisit(false);//不关闭弹窗
                actionRef.current?.reload();
                //项目信息编辑
                // editSubmit();
                // setConfirmLoading(false);
                //actionRef.current?.reload();
                // actionRef.current!.reload();
              }}
            >
              保存
            </Button>
          </div>
        </div>
      ),
    },
    {
      key: '2',
      name: 'tab2',
      label: `柜体编辑`,
      content: (
        <div>
          <ProduceInfo produceFlag={false} produceInfoId={infoId} ref={produceInfoRef} />
        </div>
      ),
    },
    {
      key: '3',
      name: 'tab3',
      label: `团队绑定`,
      content: (
        <div className="teamTab3">
          <div className="teamName">
            团队编号：
            <Input
              ref={teamCodeRef}
              disabled
              value={teamInfo ? teamInfo.teamCode : '-'}
              style={{ width: 300 }}
            />
            <span style={{ marginLeft: '20px' }}>
              团队名称：
              {!changeTeamFlag ? (
                <Input
                  disabled
                  value={teamInfo ? teamInfo.teamName : '-'}
                  style={{ width: 300, marginTop: 20 }}
                />
              ) : (
                <Select
                  style={{ width: 300, marginTop: 20 }}
                  placeholder="请选择团队编号"
                  defaultValue={teamInfo ? teamInfo.teamName : '-'}
                  onChange={(value, label) => {
                    teamCodeRef.current!.input.value = value;
                    if (allTeamMenber) {
                      allTeamMenber.forEach((item) => {
                        if (item.teamName == label.label) {
                          setTeamInfo(item);
                        }
                      });
                    }
                  }}
                  options={teamOptions}
                />
              )}
            </span>
            <Button style={{ marginTop: '18px' }} type="primary" onClick={changeTeam}>
              更换团队
            </Button>
          </div>

          <div style={{ marginTop: '20' }}>
            {/* 团队成员： */}
            <Table
              columns={teamInfoColumns}
              rowKey={(record) => record.id}
              bordered
              dataSource={teamInfo ? teamInfo.teamInfos : ''}
              pagination={{ pageSize: 100 }}
              scroll={{ y: 300 }}
            />
          </div>
          <div className="sureBtn">
            <Button type="primary" disabled={!changeTeamFlag} onClick={sureChangeTeam}>
              保存
            </Button>
          </div>
        </div>
      ),
    },
    // {
    //   key: '4',
    //   name: 'tab4',
    //   label: `项目主计划`,
    //   content: (
    //     <div style={{ height: 500 }}>
    //       <MasterPlan
    //         masterPlanFlag={false}
    //         masterPlanInfoId={infoId}
    //         masterPlanTeamId={teamId}
    //         ref={materPlanRef}
    //       />
    //     </div>
    //   ),
    // },
    {
      key: '5',
      name: 'tab5',
      label: `批次计划`,
      content: (
        <div style={{ height: 600, overflowY: 'auto' }}>
          {' '}
          {/* 若超出高度，则添加滚动条 */}
          <BatchPlan batchPlanFlag={false} batchPlanInfoId={infoId} ref={batchPlanRef} />
        </div>
      ),
    },
    {
      key: '6',
      name: 'tab6',
      label: `项目附件`,
      content: (
        <div style={{ height: 500, padding: 0 }}>
          <FileInfo infoFlag={false} infosId={infoId} teamsId={teamId} ref={fileInfoRef} />
        </div>
      ),
    },
    {
      key: '7',
      name: 'tab7',
      label: '异常问题',
      content: (
        <div style={{ height: 500, padding: 0, overflow: 'scroll' }}>
          <ErrorReport
            projectInfo={projectInfo}
            projectName={projectName} //将项目编号传过去
          ></ErrorReport>
        </div>
      ),
    },
    {
      key: '8',
      name: 'tab8',
      label: '物料成本对比',
      content: (
        <div style={{ height: 450, overflowY: 'auto' }}>
          {/* 若超出高度，则添加滚动条 */}
          <MaterialCostComparison projectInfoId={infoId} />
        </div>
      ),
    },
    {
      key: '9',
      name: 'tab9',
      label: '工时成本对比',
      content: (
        <div style={{ height: 450, overflowY: 'auto' }}>
          {/* 若超出高度，则添加滚动条 */}
          <WorkHoursComparison projectInfoId={infoId} />
        </div>
      ),
    },
    /*     {
      key: '8',
      name: 'tab8',
      label: `收款信息`,
      content: (
        <div>
          <Form
            name="wrap"
            labelCol={{ flex: '110px' }}
            labelAlign="left"
            labelWrap
            form={feeForm}
            wrapperCol={{ flex: 1 }}
            colon={false}
            validateTrigger={['onBlur', 'onChange']}
          >
            <div className="fee-title">预付款</div>
            <Row gutter={[50, 0]} style={{ marginLeft: '50px' }}>
              <Col span={5}>
                <Form.Item
                  label="日期"
                  name="advancePayDate"
                  labelCol={{ span: 6 }} // 标签占据 6 格
                  wrapperCol={{ span: 18 }} // 表单控件占据 18 格
                  // rules={[{ required: true, message: '请输入日期！' }]}
                >
                  <DatePicker style={{ width: '20px' }} />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item
                  label="金额"
                  name="advancePay"
                  labelCol={{ span: 6 }} // 标签占据 6 格
                  wrapperCol={{ span: 18 }}
                  rules={[
                    // { required: true, message: '请输入合同金额！' },
                    {
                      pattern: /^\d+(\.\d{1,2})?$/,
                      message: '格式错误，只能保留两位小数!',
                      validateTrigger: ['onBlur', 'onChange'],
                    },
                    {
                      validator: (_, value) =>
                        new Promise((resolve, reject) => {
                          const finalPay = feeForm.getFieldsValue().finalPay || 0;
                          const stagePayFirst = feeForm.getFieldsValue().stagePayFirst || 0;
                          const stagePaySecond = feeForm.getFieldsValue().stagePaySecond || 0;
                          const advancePay = feeForm.getFieldsValue().advancePay || 0;
                          const total =
                            Number(advancePay) +
                            Number(stagePayFirst) +
                            Number(stagePaySecond) +
                            Number(finalPay);
                          if (
                            (value && Number(value) > Number(contractAmount)) ||
                            (value && Number(total) > Number(contractAmount))
                          ) {
                            reject('阶段金额不能超过合同总金额!');
                          } else {
                            resolve('');
                          }
                        }),
                    },
                  ]}
                >
                  <Input
                    addonAfter="万元"
                    onBlur={(e) =>
                      handleStageChange('advancePay', e.target.value, 'advancePayRate')
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item
                  labelCol={{ span: 8 }} // 标签占据 6 格
                  wrapperCol={{ span: 16 }}
                  label="比例(%)"
                  name="advancePayRate"
                >
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input />
                </Form.Item>
                <Form.Item
                  label="是否已开票"
                  name="isInvoiceAdvance"
                  labelCol={{ span: 10 }} // 标签占据 6 格
                  wrapperCol={{ span: 14 }}
                  // rules={[{ required: true, message: '请输入是否已开票！' }]}
                >
                  <Select
                    placeholder="请选择是否已开票"
                    onChange={(value, label) => {}}
                    options={ticketOptions}
                  />
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item
                  label="附件"
                  name="advance"
                  labelCol={{ span: 4 }} // 标签占据 6 格
                  wrapperCol={{ span: 20 }}
                >
                  <Upload
                    ref={uploadRef1}
                         file-list={fileList}
                    customRequest={(e) => onFilesChange(e, 'advance')} //通过覆盖默认的上传行为，可以自定义自己的上传实现
                    showUploadList={true}
                    beforeUpload={(e) => beforeUpload(e, 'advance')}
                  >
                    <Button icon={<UploadOutlined />}>上传文件</Button>
                  </Upload>
                </Form.Item>
                <div
                  style={{
                    marginTop: '-25px',
                    fontSize: 12,
                    overflow: 'hidden',
                    color: '#13c2c2',
                    whiteSpace: 'nowrap',
                  }}
                  // hidden={
                  //   // !allFilesData.filter((item) => item?.payInfoStageName === 'advance') ||
                  //   !!hiddenArr.advance
                  // }
                  onClick={() => {
                    const itemTemp = allFilesData.filter(
                      (item: any) => item?.payInfoStageName === 'advance',
                    )[0];
                    const filetype = itemTemp.payFileName.split('.').pop();
                    if (filetype == 'pdf' || filetype == 'png' || filetype == 'jpg') {
                      const w = window.open('about:blank');
                      if (w) {
                        w.location.href = itemTemp.fileUrl;
                      }
                    } else {
                      message.warning('该文件不能预览');
                    }
                  }}
                >
                  {Ellipsis(
                    // allFilesData.filter((item) => item?.payInfoStageName === 'advance')[0]
                    //   ?.payFileName,
                    advanceFile?.payFileName,
                  )}
                </div>
              </Col>
            </Row>
            <div className="fee-title">阶段款Ⅰ</div>
            <Row gutter={[50, 0]} style={{ marginLeft: '50px' }}>
              <Col span={5}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input />
                </Form.Item>
                <Form.Item
                  label="日期"
                  name="stagePayDateFirst"
                  labelCol={{ span: 6 }} // 标签占据 6 格
                  wrapperCol={{ span: 18 }}
                  // rules={[{ required: true, message: '请输入日期！' }]}
                >
                  <DatePicker />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item
                  label="金额"
                  name="stagePayFirst"
                  labelCol={{ span: 6 }} // 标签占据 6 格
                  wrapperCol={{ span: 18 }}
                  rules={[
                    // { required: true, message: '请输入合同金额！' },
                    {
                      pattern: /^\d+(\.\d{1,2})?$/,
                      message: '格式错误，只能保留两位小数!',
                      validateTrigger: ['onBlur', 'onChange'],
                    },
                    {
                      validator: (_, value) =>
                        new Promise((resolve, reject) => {
                          const finalPay = feeForm.getFieldsValue().finalPay || 0;
                          const stagePayFirst = feeForm.getFieldsValue().stagePayFirst || 0;
                          const stagePaySecond = feeForm.getFieldsValue().stagePaySecond || 0;
                          const advancePay = feeForm.getFieldsValue().advancePay || 0;
                          const total =
                            Number(advancePay) +
                            Number(stagePayFirst) +
                            Number(stagePaySecond) +
                            Number(finalPay);
                          if (
                            (value && Number(value) > Number(contractAmount)) ||
                            (value && Number(total) > Number(contractAmount))
                          ) {
                            reject('阶段金额不能超过合同总金额!');
                          } else {
                            resolve('');
                          }
                        }),
                    },
                  ]}
                >
                  <Input
                    addonAfter="万元"
                    onBlur={(e) =>
                      handleStageChange('stagePayFirst', e.target.value, 'stagePayRateFirst')
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item
                  labelCol={{ span: 8 }} // 标签占据 6 格
                  wrapperCol={{ span: 16 }}
                  label="比例(%)"
                  name="stagePayRateFirst"
                >
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item
                  label="是否已开票"
                  name="isInvoiceStageFirst"
                  labelCol={{ span: 10 }} // 标签占据 6 格
                  wrapperCol={{ span: 14 }}
                  // rules={[{ required: true, message: '请输入是否已开票！' }]}
                >
                  <Select
                    placeholder="请选择是否已开票"
                    onChange={(value, label) => {}}
                    options={ticketOptions}
                  />
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item
                  label="附件"
                  name="stageFirst"
                  labelCol={{ span: 4 }} // 标签占据 6 格
                  wrapperCol={{ span: 20 }}
                >
                  <Upload
                         file-list={fileList}
                    customRequest={onFilesChange} //通过覆盖默认的上传行为，可以自定义自己的上传实现
                    showUploadList={true}
                    beforeUpload={(e) => beforeUpload(e, 'stageFirst')}
                  >
                    <Button icon={<UploadOutlined />}>上传文件</Button>
                  </Upload>
                </Form.Item>
                <div
                  style={{
                    marginTop: '-25px',
                    fontSize: 12,
                    overflow: 'hidden',
                    color: '#13c2c2',
                    whiteSpace: 'nowrap',
                  }}
                  // hidden={
                  //   !allFilesData.filter((item) => item?.payInfoStageName === 'stageFirst') ||
                  //   !!hiddenArr.stageFirst
                  // }
                  onClick={() => {
                    const itemTemp = allFilesData.filter(
                      (item: any) => item?.payInfoStageName === 'stageFirst',
                    )[0];
                    const filetype = itemTemp.payFileName.split('.').pop();
                    if (filetype == 'pdf' || filetype == 'png' || filetype == 'jpg') {
                      const w = window.open('about:blank');
                      if (w) {
                        w.location.href = itemTemp.fileUrl;
                      }
                    } else {
                      message.warning('该文件不能预览');
                    }
                  }}
                >
                  {Ellipsis(
                    // allFilesData.filter((item) => item?.payInfoStageName === 'stageFirst')[0]
                    firstFile?.payFileName,
                  )}
                </div>
              </Col>
            </Row>
            <div className="fee-title">阶段款Ⅱ</div>
            <Row gutter={[50, 0]} style={{ marginLeft: '50px' }}>
              <Col span={5}>
                <Form.Item
                  label="日期"
                  name="stagePayDateSecond"
                  labelCol={{ span: 6 }} // 标签占据 6 格
                  wrapperCol={{ span: 18 }}
                  // rules={[{ required: true, message: '请输入日期！' }]}
                >
                  <DatePicker />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item
                  label="金额"
                  name="stagePaySecond"
                  labelCol={{ span: 6 }} // 标签占据 6 格
                  wrapperCol={{ span: 18 }}
                  rules={[
                    // { required: true, message: '请输入合同金额！' },
                    {
                      pattern: /^\d+(\.\d{1,2})?$/,
                      message: '格式错误，只能保留两位小数!',
                      validateTrigger: ['onBlur', 'onChange'],
                    },
                    {
                      validator: (_, value) =>
                        new Promise((resolve, reject) => {
                          const finalPay = feeForm.getFieldsValue().finalPay || 0;
                          const stagePayFirst = feeForm.getFieldsValue().stagePayFirst || 0;
                          const stagePaySecond = feeForm.getFieldsValue().stagePaySecond || 0;
                          const advancePay = feeForm.getFieldsValue().advancePay || 0;
                          const total =
                            Number(advancePay) +
                            Number(stagePayFirst) +
                            Number(stagePaySecond) +
                            Number(finalPay);
                          if (
                            (value && Number(value) > Number(contractAmount)) ||
                            (value && Number(total) > Number(contractAmount))
                          ) {
                            reject('阶段金额不能超过合同总金额!');
                          } else {
                            resolve('');
                          }
                        }),
                    },
                  ]}
                >
                  <Input
                    addonAfter="万元"
                    onBlur={(e) =>
                      handleStageChange('stagePaySecond', e.target.value, 'stagePayRateSecond')
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item
                  label="比例(%)"
                  labelCol={{ span: 8 }} // 标签占据 6 格
                  wrapperCol={{ span: 16 }}
                  name="stagePayRateSecond"
                >
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item
                  label="是否已开票"
                  labelCol={{ span: 10 }} // 标签占据 6 格
                  wrapperCol={{ span: 14 }}
                  name="isInvoiceStageSecond"
                  // rules={[{ required: true, message: '请输入是否已开票！' }]}
                >
                  <Select
                    placeholder="请选择是否已开票"
                    onChange={(value, label) => {}}
                    options={ticketOptions}
                  />
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item
                  label="附件"
                  name="stageSecond"
                  labelCol={{ span: 4 }} // 标签占据 6 格
                  wrapperCol={{ span: 20 }}
                >
                  <Upload
                   //listType="picture-card"
                    file-list={fileList}
                    customRequest={onFilesChange} //通过覆盖默认的上传行为，可以自定义自己的上传实现
                    showUploadList={true}
                    beforeUpload={(e) => beforeUpload(e, 'stageSecond')}
                  >
                    <Button icon={<UploadOutlined />}>上传文件</Button>
                  </Upload>
                </Form.Item>
                <div
                  style={{
                    marginTop: '-25px',
                    fontSize: 12,
                    overflow: 'hidden',
                    color: '#13c2c2',
                    whiteSpace: 'nowrap',
                  }}
                  // hidden={
                  //   !allFilesData.filter((item) => item?.payInfoStageName === 'stageSecond') ||
                  //   !!hiddenArr.stageSecond
                  // }
                  onClick={() => {
                    const itemTemp = allFilesData.filter(
                      (item: any) => item?.payInfoStageName === 'stageSecond',
                    )[0];
                    const filetype = itemTemp.payFileName.split('.').pop();
                    if (filetype == 'pdf' || filetype == 'png' || filetype == 'jpg') {
                      const w = window.open('about:blank');
                      if (w) {
                        w.location.href = itemTemp.fileUrl;
                      }
                    } else {
                      message.warning('该文件不能预览');
                    }
                  }}
                >
                  {Ellipsis(
                    // allFilesData.filter((item) => item?.payInfoStageName === 'stageSecond')[0]
                    secondFile?.payFileName,
                  )}
                </div>
              </Col>
            </Row>
            <div className="fee-title">尾 款</div>
            <Row gutter={[50, 0]} style={{ marginLeft: '50px' }}>
              <Col span={5}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input />
                </Form.Item>
                <Form.Item
                  label="日期"
                  name="finalPayDate"
                  labelCol={{ span: 6 }} // 标签占据 6 格
                  wrapperCol={{ span: 18 }}
                  // rules={[{ required: true, message: '请输入日期！' }]}
                >
                  <DatePicker />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item
                  label="金额"
                  name="finalPay"
                  labelCol={{ span: 6 }} // 标签占据 6 格
                  wrapperCol={{ span: 18 }}
                  rules={[
                    // { required: true, message: '请输入合同金额！' },
                    {
                      pattern: /^\d+(\.\d{1,2})?$/,
                      message: '格式错误，只能保留两位小数!',
                      validateTrigger: ['onBlur', 'onChange'],
                    },
                    {
                      validator: (_, value) =>
                        new Promise((resolve, reject) => {
                          const finalPay = feeForm.getFieldsValue().finalPay || 0;
                          const stagePayFirst = feeForm.getFieldsValue().stagePayFirst || 0;
                          const stagePaySecond = feeForm.getFieldsValue().stagePaySecond || 0;
                          const advancePay = feeForm.getFieldsValue().advancePay || 0;
                          const total =
                            Number(advancePay) +
                            Number(stagePayFirst) +
                            Number(stagePaySecond) +
                            Number(finalPay);

                          if (
                            (value && Number(value) > Number(contractAmount)) ||
                            (value && Number(total) > Number(contractAmount))
                          ) {
                            reject('阶段金额不能超过合同总金额!');
                          } else {
                            resolve('');
                          }
                        }),
                    },
                  ]}
                >
                  <Input
                    addonAfter="万元"
                    onBlur={(e) => handleStageChange('finalPay', e.target.value, 'finalPayRate')}
                  />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item
                  label="比例(%)"
                  labelCol={{ span: 8 }} // 标签占据 6 格
                  wrapperCol={{ span: 16 }}
                  name="finalPayRate"
                >
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item
                  label="是否已开票"
                  name="isInvoice"
                  labelCol={{ span: 10 }} // 标签占据 6 格
                  wrapperCol={{ span: 14 }}
                  // rules={[{ required: true, message: '请输入是否已开票！' }]}
                >
                  <Select
                    placeholder="请选择是否已开票"
                    onChange={(value, label) => {}}
                    options={ticketOptions}
                  />
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item
                  label="附件"
                  name="final"
                  labelCol={{ span: 4 }} // 标签占据 6 格
                  wrapperCol={{ span: 20 }}
                >
                  <Upload
                    //listType="picture-card"
                    file-list={fileList}
                    customRequest={onFilesChange} //通过覆盖默认的上传行为，可以自定义自己的上传实现
                    showUploadList={true}
                    beforeUpload={(e) => beforeUpload(e, 'final')}
                  >
                    <Button icon={<UploadOutlined />}>上传文件</Button>
                  </Upload>
                </Form.Item>
                <div
                  style={{
                    marginTop: '-25px',
                    fontSize: 12,
                    overflow: 'hidden',
                    color: '#13c2c2',
                    whiteSpace: 'nowrap',
                  }}
                  // hidden={
                  //   !allFilesData.filter((item) => item?.payInfoStageName === 'final') ||
                  //   !!hiddenArr.final
                  // }
                  onClick={() => {
                    const itemTemp = allFilesData.filter(
                      (item: any) => item?.payInfoStageName === 'final',
                    )[0];
                    const filetype = itemTemp.payFileName.split('.').pop();
                    if (filetype == 'pdf' || filetype == 'png' || filetype == 'jpg') {
                      const w = window.open('about:blank');
                      if (w) {
                        w.location.href = itemTemp.fileUrl;
                      }
                    } else {
                      message.warning('该文件不能预览');
                    }
                  }}
                >
                  {Ellipsis(
                    // allFilesData.filter((item) => item?.payInfoStageName === 'final')[0]
                    finalFile?.payFileName,
                  )}
                </div>
              </Col>
            </Row>
            <div className="fee-title"></div>
            <Row gutter={[50, 0]} style={{ marginLeft: '50px' }}>
              <Col span={24}>
                <Form.Item
                  labelCol={{ span: 1 }} // 标签占据 6 格
                  wrapperCol={{ span: 20 }}
                  label="备注"
                  name="contractCode"
                >
                  <Input style={{ marginLeft: '10px' }} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <div className="info-btn">
            <Button
              type="primary"
              onClick={async () => {
                const finalPay = feeForm.getFieldsValue().finalPay || 0;
                const stagePayFirst = feeForm.getFieldsValue().stagePayFirst || 0;
                const stagePaySecond = feeForm.getFieldsValue().stagePaySecond || 0;
                const advancePay = feeForm.getFieldsValue().advancePay || 0;
                const total =
                  Number(advancePay) +
                  Number(stagePayFirst) +
                  Number(stagePaySecond) +
                  Number(finalPay);
                if (Number(total) > Number(contractAmount)) {
                  message.info('阶段款总额大于合同金额!');
                } else {
                  feeForm.validateFields().then(async () => {
                    const res = { ...feeForm.getFieldsValue() };
                    //如果文件不为空，传文件
                    let allResult: any[] = [];
                    if (allFiles.length > 0) {
                      allResult = await Promise.all(
                        allFiles.map(async (item) => {
                          const result = await uploadFileByPayInfo(item);
                          return result;
                        }),
                      );
                    }
                    if (res.advancePayDate !== null) {
                      res.advancePayDate = dayjs(res.advancePayDate).format(dateFormat);
                    }
                    if (res.stagePayDateFirst !== null) {
                      res.stagePayDateFirst = dayjs(res.stagePayDateFirst).format(dateFormat);
                    }
                    if (res.stagePayDateSecond !== null) {
                      res.stagePayDateSecond = dayjs(res.stagePayDateSecond).format(dateFormat);
                    }
                    if (res.finalPayDate !== null) {
                      res.finalPayDate = dayjs(res.finalPayDate).format(dateFormat);
                    }
                    res.isInvoice = res.isInvoice == '是' ? 1 : 0;
                    res.isInvoiceAdvance = res.isInvoiceAdvance == '是' ? 1 : 0;
                    res.isInvoiceStageFirst = res.isInvoiceStageFirst == '是' ? 1 : 0;
                    res.isInvoiceStageSecond = res.isInvoiceStageSecond == '是' ? 1 : 0;
                    res.id = feeInfo!.id;
                    res.infoId = feeInfo!.infoId;
                    const result = await updatePayInfo(res);
                    if (
                      result &&
                      result.code === 0
                      // (allFiles.length > 0 && allFiles.length === allResult.length)
                    ) {
                      message.success('更新成功');
                    }
                  });
                  setConfirmLoading(false);
                  setEditModalVisit(false);
                  actionRef.current!.reload();
                }
              }}
            >
              确定
            </Button>
          </div>
        </div>
      ),
    }, */

    // {
    //   key: '7',
    //   name: 'tab7',
    //   label: `进度信息`,
    //   content: <div style={{ height: 500 }}></div>,
    // },
  ];

  type nowCustom = {
    customerName: string;
    customerCode: any;
  };

  type customerCodeType = {
    label: string;
    value: string;
    id?: string;
  };

  type customer = {
    createName: string;
    createTime: string;
    customerCode: string;
    customerDesc: string;
    customerName: string;
    id: string;
  };

  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
      align: 'center',
      sorter: true,
    },
    // {
    //   title: '合同名称',
    //   dataIndex: 'contractName',
    //   width: 200,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: '合同编号',
    //   dataIndex: 'contractCode',
    //   width: 110,
    //   align: 'center',
    //   sorter: true,

    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: '合同日期',
    //   dataIndex: 'contractDate',

    //   width: 110,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    //   search: false,
    // },
    // {
    //   title: '合同日期',
    //   dataIndex: 'contractDate',

    //   valueType: 'dateRange',
    //   hideInTable: true,
    // },
    // {
    //   title: '合同金额',
    //   dataIndex: 'contractAmount',
    //   width: 90,

    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    {
      title: '销售订单号',
      dataIndex: 'so',

      width: 110,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      width: 180,

      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目编号',
      dataIndex: 'projectCode',
      width: 110,

      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目交付日期',
      dataIndex: 'deliveryDate',
      width: 120,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      search: false,
    },
    {
      title: '项目交付日期',
      dataIndex: 'deliveryDate',
      valueType: 'dateRange',

      hideInTable: true,
    },
    // {
    //   title: '项目状态',
    //   dataIndex: 'contractState',
    //   width: 90,

    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    {
      title: '客户编号',
      dataIndex: 'customerCode',
      width: 110,

      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
      width: 110,
      align: 'center',
      sorter: true,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '客户地址',
      dataIndex: 'customerAddress',
      width: 110,

      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '联系人',
      dataIndex: 'contactName',
      width: 110,

      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '联系电话',
      dataIndex: 'contactNo',
      width: 110,

      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '交货地点',
      dataIndex: 'deliveryAddress',
      width: 110,
      align: 'center',
      sorter: true,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '备注',
      dataIndex: 'memo',
      width: 90,

      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: '操作',
      valueType: 'option',
      width: 200,
      key: 'option',
      fixed: 'right',
      align: 'center',
      // render: (text, record) => [
      //   <a
      //     key="editKey"
      //     onClick={async () => {
      //       setTeamInfo(undefined);
      //       setEditModalVisit(true);
      //       setCreateOrUpdate(true);
      //       //setFormTitle('编辑');
      //       form.setFieldsValue({
      //         city: record.city,
      //         contactName: record.contactName,
      //         contactNo: record.contactNo,
      //         contractAmount: record.contractAmount,
      //         contractCode: record.contractCode,
      //         contractDate: dayjs(record.contractDate, dateFormat),
      //         contractName: record.contractName,
      //         contractState: record.contractState,
      //         country: record.country,
      //         customerAddress: record.customerAddress,
      //         customerCode: record.customerCode,
      //         customerName: record.customerName,
      //         deliveryAddress: record.deliveryAddress,
      //         deliveryDate:
      //           record.deliveryDate === null ? null : dayjs(record.deliveryDate, dateFormat),
      //         memo: record.memo,
      //         projectCode: record.projectCode,
      //         projectName: record.projectName,
      //         province: record.province,
      //         reserved: record.reserved,
      //         serialNo: record.serialNo,
      //         so: record.so,
      //         id: record.id,
      //       });
      //       setContractAmount(record.contractAmount);
      //       const result = await getProjectTeamInfos(record.id); //团队信息
      //       setTeamId(record.teamId);
      //       setInfoId(record.id);
      //       if (result === undefined) {
      //       } else {
      //         setTeamInfo(result.data);
      //       }

      //       //获取所有团队信息
      //       const allTeamInfo = await getTeamInfos();
      //       const tempAllTeamOptions: any[] = [];
      //       allTeamInfo.data.forEach((element) => {
      //         tempAllTeamOptions.push({ label: element.teamName, value: element.teamCode });
      //       });
      //       setTeamOptions(tempAllTeamOptions);
      //       //所有团队成员
      //       setAllTeamMenber(allTeamInfo.data);
      //       //获取付款信息
      //       const { data: feeResult } = await getPayInfoByInfoId(record.id);
      //       setFeeInfo(feeResult);
      //       console.log(feeResult, 'datadatadata');
      //       const amount = record.contractAmount;
      //       const regex = /(\d+)/;
      //       const match = amount.match(regex);
      //       const number = match[1];
      //       feeForm.setFieldsValue({
      //         advancePay: feeResult.advancePay,
      //         stagePayFirst: feeResult.stagePayFirst,
      //         stagePaySecond: feeResult.stagePaySecond,
      //         finalPay: feeResult.finalPay,
      //         advancePayDate:
      //           feeResult.advancePayDate && dayjs(feeResult.advancePayDate, dateFormat),
      //         stagePayDateFirst:
      //           feeResult.stagePayDateFirst && dayjs(feeResult.stagePayDateFirst, dateFormat),
      //         stagePayDateSecond:
      //           feeResult.stagePayDateSecond && dayjs(feeResult.stagePayDateSecond, dateFormat),
      //         finalPayDate: feeResult.finalPayDate && dayjs(feeResult.finalPayDate, dateFormat),
      //         isInvoice: feeResult.isInvoice ? '是' : '否',
      //         isInvoiceAdvance: feeResult.isInvoiceAdvance ? '是' : '否',
      //         isInvoiceStageFirst: feeResult.isInvoiceStageFirst ? '是' : '否',
      //         isInvoiceStageSecond: feeResult.isInvoiceStageSecond ? '是' : '否',
      //         memo: feeResult.string,
      //         stagePayRateFirst: feeResult.stagePayRateFirst / Number(number),
      //         stagePayRateSecond: feeResult.stagePayRateSecond / Number(number),
      //         finalPayRate: feeResult.finalPay / Number(number),
      //         advancePayRate: feeResult.advancePay / Number(number),
      //       });
      //     }}
      //   >
      //     查看
      //   </a>,
      //   <a
      //     key="pauseKey"
      //     onClick={async () => {
      //       const result = await pauseOrStartProject(record.id);
      //       if (result.code == 0) {
      //         message.success(result.data.contractState);
      //       }
      //       actionRef.current?.reload();
      //     }}
      //   >
      //     暂停
      //   </a>,
      //   <a key="closeProductKey" onClick={() => {}}>
      //     关闭
      //   </a>,
      //   <a
      //     key="deleteKey"
      //     onClick={() => {
      //       Modal.confirm({
      //         title: '删除',
      //         content: '确定要删除吗',
      //         okText: '确认',
      //         cancelText: '取消',
      //         onOk: async () => {
      //           const result = await delInfo({ id: record.id });
      //           if (result !== null) {
      //             message.success('删除成功！');
      //           }
      //           actionRef.current!.reload();
      //         },
      //       });
      //     }}
      //   >
      //     删除
      //   </a>,
      //   <a
      //     key="editProductKey"
      //     onClick={() => {
      //       history.push({ pathname: '/project/produceInfo', state: { id: record.id } });
      //     }}
      //   >
      //     柜体编辑
      //   </a>,
      // ],
      render: (text, record) => {
        /*         const editMenu = (
          <Menu>
            <Menu.Item key="pause">
              <a
                style={{ color: '#13c2c2' }}
                hidden={true}
                key="pauseKey"
                onClick={async () => {
                  const result = await pauseOrStartProject(record.id);
                  if (result.code == 0) {
                    message.success(result.data.contractState);
                  }
                  actionRef.current?.reload();
                }}
              >
                项目暂停
              </a>
            </Menu.Item>
            <Menu.Item key="delete" onClick={() => {}}>
              <a
                style={{ color: '#13c2c2' }}
                key="deleteKey"
                onClick={() => {
                  Modal.confirm({
                    title: '删除',
                    content: '确定要删除吗',
                    okText: '确认',
                    cancelText: '取消',
                    onOk: async () => {
                      const result = await delInfo({ id: record.id });
                      if (result !== null) {
                        message.success('删除成功！');
                      }
                      actionRef.current!.reload();
                    },
                  });
                }}
              >
                项目删除
              </a>
            </Menu.Item>
            <Menu.Item key="closeCabinet">
              <a
                style={{ color: '#13c2c2' }}
                key="closeProductKey"
                onClick={async () => {
                  Modal.confirm({
                    title: '项目结束',
                    content: '确定要结束项目吗？',
                    okText: '确认',
                    cancelText: '取消',
                    onOk: async () => {
                      const result = await shutProject(record.id);
                      if (result == null || result == undefined) {
                        return;
                      }
                      if (result !== null && result.code === 0) {
                        message.success('项目已结束！');
                      }
                      actionRef.current!.reload();
                    },
                  });
                }}
              >
                项目结束
              </a>
            </Menu.Item>
            <Menu.Item key="editCabinet" onClick={() => {}}>
              <a
                style={{ color: '#13c2c2' }}
                key="editProductKey"
                onClick={() => {
                  history.push({ pathname: '/project/produceInfo', state: { id: record.id } });
                }}
              >
                柜体编辑
              </a>
            </Menu.Item>
          </Menu>
        ); */

        return (
          <div>
            <a
              key="editKey"
              style={{ marginRight: '20px' }}
              onClick={async () => {
                setTeamInfo(undefined);
                setEditModalVisit(true);
                setCreateOrUpdate(true);
                setProjectCode(record.projectCode);
                setProjectName(record.contractName);
                setProjectInfo(record);
                form.setFieldsValue({
                  city: record.city,
                  contactName: record.contactName,
                  contactNo: record.contactNo,
                  contractAmount: record.contractAmount,
                  contractCode: record.contractCode,
                  contractDate: dayjs(record.contractDate, dateFormat),
                  contractName: record.contractName,
                  contractState: record.contractState,
                  country: record.country,
                  customerAddress: record.customerAddress,
                  customerCode: record.customerCode,
                  customerName: record.customerName,
                  deliveryAddress: record.deliveryAddress,
                  deliveryDate:
                    record.deliveryDate === null ? null : dayjs(record.deliveryDate, dateFormat),
                  memo: record.memo,
                  projectCode: record.projectCode,
                  projectName: record.projectName,
                  province: record.province,
                  reserved: record.reserved,
                  serialNo: record.serialNo,
                  so: record.so,
                  id: record.id,
                });
                setContractAmount(record.contractAmount);
                const result = await getProjectTeamInfos(record.id); //团队信息
                setTeamId(record.teamId);
                setInfoId(record.id);
                produceInfoRef && produceInfoRef.current && produceInfoRef?.current.update();
                materPlanRef && materPlanRef.current && materPlanRef?.current?.update();
                batchPlanRef && batchPlanRef.current && batchPlanRef?.current?.update();
                fileInfoRef && fileInfoRef.current && fileInfoRef?.current?.update();
                if (result === undefined) {
                } else {
                  setTeamInfo(result.data);
                }

                //获取所有团队信息
                const allTeamInfo = await getTeamInfos();
                const tempAllTeamOptions: any[] = [];
                allTeamInfo.data.forEach((element) => {
                  tempAllTeamOptions.push({ label: element.teamName, value: element.teamCode });
                });
                setTeamOptions(tempAllTeamOptions);
                //所有团队成员
                setAllTeamMenber(allTeamInfo.data);
                //获取付款信息
                const { data: feeResult } = await getPayInfoByInfoId(record.id);
                setFeeInfo(feeResult);
                //所有附件信息
                const allType = ['advance', 'stageFirst', 'stageSecond', 'final'];
                const allFileType: any[] = [];
                for (const item of allType) {
                  const temp = await getFileByPayInfo({ infoId: record.id, stageName: item });
                  allFileType.push(temp?.data);
                }
                const advace1 = await getFileByPayInfo({ infoId: record.id, stageName: 'advance' });
                setAdvanceFile(advace1?.data);
                const firstName1 = await getFileByPayInfo({
                  infoId: record.id,
                  stageName: 'stageFirst',
                });
                setFirstFile(firstName1?.data);
                const secondName1 = await getFileByPayInfo({
                  infoId: record.id,
                  stageName: 'stageSecond',
                });
                setSecondName(secondName1?.data);
                const finalName1 = await getFileByPayInfo({
                  infoId: record.id,
                  stageName: 'final',
                });
                setFinalFile(finalName1?.data);
                // console.log('点击查看了嘛', allFileType);

                setAllFilesData(allFileType);
                feeForm.setFieldsValue({
                  advancePay: feeResult.advancePay && feeResult.advancePay.toFixed(2),
                  stagePayFirst: feeResult.stagePayFirst && feeResult.stagePayFirst.toFixed(2),
                  stagePaySecond: feeResult.stagePaySecond && feeResult.stagePaySecond.toFixed(2),
                  finalPay: feeResult.finalPay && feeResult.finalPay.toFixed(2),
                  advancePayDate:
                    feeResult.advancePayDate && dayjs(feeResult.advancePayDate, dateFormat),
                  stagePayDateFirst:
                    feeResult.stagePayDateFirst && dayjs(feeResult.stagePayDateFirst, dateFormat),
                  stagePayDateSecond:
                    feeResult.stagePayDateSecond && dayjs(feeResult.stagePayDateSecond, dateFormat),
                  finalPayDate: feeResult.finalPayDate && dayjs(feeResult.finalPayDate, dateFormat),
                  isInvoice: feeResult.isInvoice ? '是' : '否',
                  isInvoiceAdvance: feeResult.isInvoiceAdvance ? '是' : '否',
                  isInvoiceStageFirst: feeResult.isInvoiceStageFirst ? '是' : '否',
                  isInvoiceStageSecond: feeResult.isInvoiceStageSecond ? '是' : '否',
                  memo: feeResult.string,
                  stagePayRateFirst:
                    feeResult.stagePayRateFirst && feeResult.stagePayRateFirst.toFixed(2),
                  stagePayRateSecond:
                    feeResult.stagePayRateSecond && feeResult.stagePayRateSecond.toFixed(2),
                  finalPayRate: feeResult.finalPayRate && feeResult.finalPayRate.toFixed(2),
                  advancePayRate: feeResult.advancePayRate && feeResult.advancePayRate.toFixed(2),
                });
              }}
            >
              查看
            </a>
            <a
              style={{ color: '#13c2c2', marginRight: '20px' }}
              key="closeProductKey"
              onClick={async () => {
                Modal.confirm({
                  title: '项目结束',
                  content: '确定要结束项目吗？',
                  okText: '确认',
                  cancelText: '取消',
                  onOk: async () => {
                    const result = await shutProject(record.id);
                    if (result == null || result == undefined) {
                      return;
                    }
                    if (result !== null && result.code === 0) {
                      message.success('项目已结束！');
                    }
                    actionRef.current!.reload();
                  },
                });
              }}
            >
              项目结束
            </a>
            <a
              hidden={!userRole?.includes('ROLE_Admin')}
              style={{ color: '#13c2c2' }}
              key="deleteKey"
              onClick={() => {
                Modal.confirm({
                  title: '删除',
                  content: '确定要删除吗',
                  okText: '确认',
                  cancelText: '取消',
                  onOk: async () => {
                    const result = await delInfo({ id: record.id });
                    if (result !== null) {
                      message.success('删除成功！');
                    }
                    actionRef.current!.reload();
                  },
                });
              }}
            >
              删除
            </a>

            {/*             <Dropdown overlay={editMenu} trigger={['click']}>
              <a onClick={(e) => e.preventDefault()}>
                编辑 <DownOutlined />
              </a>
            </Dropdown> */}
          </div>
        );
      },
    },
  ];

  const handleSubmit = async () => {
    setConfirmLoading(true);
    if (formTitle == '新建') {
      form
        .validateFields()
        .then(async () => {
          const res = { ...form.getFieldsValue() };
          res.customerName = nowCustomer?.customerName;
          res.curtomerCode = nowCustomer?.customerCode;
          res.contractDate = dayjs(res.contractDate).format(dateFormat);
          if (res.deliveryDate !== null) {
            res.deliveryDate = dayjs(res.deliveryDate).format(dateFormat);
          }
          const result = await addInfo(res);
          if (result != null) {
            message.success('添加成功');
          }
          setConfirmLoading(false);
          setModalVisit(false);
          actionRef.current!.reload();
        })
        .catch((err) => {
          setConfirmLoading(false);
        });
    } else {
    }
  };

  //选中selection中的序号
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  //发布项目
  const releaseProjectInfo = async () => {
    const result = await releaseProject(selectedRowKeys);
    if (result != null) {
      message.success('发布成功');
    }
    actionRef.current!.reload();
  };
  return (
    <React.Fragment>
      <PageHeaderWrapper title={false} breadcrumb={undefined}>
        <ProTable
          headerTitle="项目信息查询"
          search={tableSearchPublicConfig}
          actionRef={actionRef} //用于触发刷新操作等，看api
          rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
          toolBarRender={() => [
            // <Button
            //   key="button"
            //   icon={<RiseOutlined />}
            //   onClick={() => {
            //     releaseProjectInfo();
            //   }}
            //   type="primary"
            // >
            //   发布
            // </Button>,
            <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={async () => {
                await synProjectInfo();
              }}
              type="primary"
            >
              项目同步
            </Button>,
            <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={async () => {
                form.resetFields();
                setFormTitle('新建');
                setCreateOrUpdate(false);
                const result = await getContractAndInfoCodeNext();

                form.setFieldsValue({
                  contractCode: result.data.contractCode,
                  projectCode: result.data.projectCode,
                });

                setModalVisit(true);
              }}
              type="primary"
            >
              新建
            </Button>,
          ]}
          request={async (params = {}, sort) => {
            const sorters = sortTran(sort);
            const filters = filterTranNew(params);
            const sortersCus = [];
            const filtersCus = [];
            const result = await getInfoByPage({ ...params, sorters: sorters, filters: filters });
            const temp = await getCustomerByPage({
              ...params,
              sorters: sortersCus,
              filters: filtersCus,
            });
            const tempType: customerCodeType[] = [];
            temp.data.content.map((item: customer) => {
              tempType.push({
                label: item.customerName,
                value: item.customerCode,
                id: item.customerCode,
              });
            });
            setCustomerCode(tempType);
            return {
              data: result.data.content,
              total: result.data.totalElements,
              success: result.success,
            };
          }}
          columns={columns}
          pagination={{ pageSize: 100 }}
          scroll={{ x: 2000, y: 'calc(100vh - 460px)' }}
          rowSelection={{ onChange: onSelectChange }}
        />
        <Modal
          title={formTitle}
          width={800}
          open={modalVisit}
          onOk={handleSubmit}
          confirmLoading={confirmLoading}
          onCancel={() => setModalVisit(false)}
          destroyOnClose
        >
          <Form
            name="wrap"
            labelCol={{ flex: '110px' }}
            labelAlign="right"
            labelWrap
            form={form}
            wrapperCol={{ flex: 1 }}
            colon={false}
            validateTrigger={['onBlur', 'onChange']}
          >
            {/* <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input />
                </Form.Item>
                <Form.Item
                  label="合同名称"
                  name="contractName"
                  rules={[{ required: true, message: '请输入合同名称！' }]}
                >
                  <Input maxLength={20} showCount />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="合同编号"
                  name="contractCode"
                  rules={[{ required: true, message: '请输入合同编号！' }]}
                >
                  <Input disabled={true} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="合同日期"
                  name="contractDate"
                  rules={[{ required: true, message: '请输入合同日期！' }]}
                >
                  <DatePicker />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="合同金额"
                  name="contractAmount"
                  rules={[
                    // { required: true, message: '请输入合同金额！' },
                    {
                      pattern: /^\d+(\.\d{1,2})?$/,
                      message: '格式错误，只能保留两位小数!',
                      validateTrigger: ['onBlur', 'onChange'],
                    },
                  ]}
                >
                  <Input
                    addonAfter="万元"
                    onBlur={(e) => handleContractAmountChange(e.target.value)}
                  />
                </Form.Item>
              </Col>
            </Row> */}
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="项目名称"
                  name="projectName"
                  rules={[{ required: true, message: '请输入项目名称！' }]}
                >
                  <Input maxLength={20} showCount />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="项目编号"
                  rules={[{ required: true, message: '请输入销售订单号！' }]}
                  name="projectCode"
                >
                  <Input disabled={true} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="客户名称" name="customerName">
                  <Select
                    placeholder="请选择客户名称"
                    disabled={createOrUpdate}
                    onChange={(label, value) => {
                      setNowCustomer({ customerName: value.label, customerCode: label });
                      form.setFieldsValue({
                        customerCode: label,
                      });
                    }}
                    options={customeCode}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="客户编号" name="customerCode">
                  <Input disabled />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="客户地址" name="customerAddress">
                  <Input maxLength={20} showCount />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="联系人" name="contactName">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="联系电话" name="contactNo">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="交货地点" name="deliveryAddress">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="项目交付日期"
                  name="deliveryDate"
                  rules={[{ required: true, message: '请输入项目交付日期!' }]}
                >
                  <DatePicker style={{ width: 240 }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="销售订单号"
                  rules={[{ required: true, message: '请输入销售订单号！' }]}
                  name="so"
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="备&nbsp;&nbsp;&nbsp;&nbsp;注" name="memo">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
      </PageHeaderWrapper>
      <Modal
        title="项目信息"
        width={1800}
        open={editModalVisit}
        onCancel={() => {
          setEditModalVisit(false);
          actionRef.current?.reload();
        }}
        onOk={() => setEditModalVisit(false)}
        footer={null}
        destroyOnClose
      >
        <Tabs
          style={{ overflow: 'hidden' }}
          defaultActiveKey="0"
          destroyInactiveTabPane
          items={items.map((item, i) => {
            const id = String(i + 1);
            return {
              label: item.label,
              key: id,
              children: <div>{item.content}</div>,
            };
          })}
          onChange={onChange}
        />
      </Modal>
    </React.Fragment>
  );
};
export default Info;
